<template>
    <div>
        <div class="top">
          <div class="left" @touchend="$router.back()">
             <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>              
          </div>
          <div class="mid">
              周边
          </div>
          <div class="right"></div>
      </div>
        <keep-alive>
        <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
import heads from '@/components/heads';
export default {
  components:{
      heads
  }
}
</script>
 <style lang="less" scoped>
 @import "~less/base";
         .top{//顶部导航
            display: flex;
            height: 1rem;
            background-color: @background-a;
            text-align: center;
            line-height: 1rem;
            color: @color-t;
            .left{
                flex: 0 0 20%;
            }
            .mid{
                flex: 0 0 60%;
                font-size: 14px;
                letter-spacing: 2px;
            }
            .right{
                flex: 0 0 20%;
            }
        }
 </style>
 